<template>
  <div>
    <el-carousel>
      <el-carousel-item>
        <img src="/img/carousel/1.jpeg" alt="" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="/img/carousel/6b005536a787c60398d6dd1fb6c691d2.jpeg" alt="" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="/img/carousel/ffe1fed8398fb366aea76c5b24fb5721.jpeg" alt="" />
      </el-carousel-item>
    </el-carousel>
    <swiper class="swiper" :options="swiperOption" ref="mySwiper">
      <swiper-slide> <img src="/img/c0a1c8773feb3559220cfc82be499388.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/4c6c3ef834cb2f8b3b8e9591667062ab.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/1e8b4520a148ee3998b2dfffdf049c4d.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/1475053481013.jpg" alt="" /> </swiper-slide>
    </swiper>
    <swiper class="swiper" :options="swiper" ref="rel">
      <swiper-slide> <img src="/img/c0a1c8773feb3559220cfc82be499388.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/4c6c3ef834cb2f8b3b8e9591667062ab.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/1e8b4520a148ee3998b2dfffdf049c4d.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/1475053481013.jpg" alt="" /> </swiper-slide>
    </swiper>
    <swiper class="swiper" :options="swipers" ref="rels">
      <swiper-slide> <img src="/img/c0a1c8773feb3559220cfc82be499388.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/4c6c3ef834cb2f8b3b8e9591667062ab.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/1e8b4520a148ee3998b2dfffdf049c4d.jpeg" alt="" /> </swiper-slide>
      <swiper-slide> <img src="/img/1475053481013.jpg" alt="" /> </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        grabCursor: true,
        //可见图片张数
        slidesPerView: 2,
        // 默认选中中间一张
        centeredSlides: true,
        //无限循环
        loop: true,
        //自动轮播
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
        },

        // notNextTick: true,
        slideToClickedSlide: true,
        on: {
          click: function () {
            //需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
            const realIndex = this.realIndex
            // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内
            //点击可以手动切换轮播图
            vm.$refs.mySwiper.swiper.slideTo(realIndex, 300, false)
          },
        },
        //  direction: 'horizontal',
        //  spaceBetween: 4, // 在slide之间设置距离 也可以是百分比 10%
        //  centeredSlides: true, // 默认选中中间一张
        // observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        // observeParents: true, // 修改swiper的父元素时，自动初始化swiper
      },
      swiper: {
        slidesPerView: 2, //设置slider容器能够同时显示的slides数量
        spaceBetween: 30, //slide之间设置距离
        centeredSlides: true, //设定为true时，active slide会居中，而不是默认状态下的居左
        loop: true, //在原本slide前后复制若干个slide(默认一个)并在合适的时候切换
        autoplay: {
          //设置为true启动自动切换，object/boolean
          delay: 2500, //自动切换的时间间隔
          disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay，设置为false，用户操作swiper之后自动切换不会停止
        },
      },
      swipers: {
        observer: true, // 当改变swiper样式或修改swiper的子元素时，自动初始化swiper，
        observerParents: true,
        effect: 'coverflow', // 切换效果'slide(普通切换、默认)','fade('淡入')','cube(方块)','coverflow(3d流)','flip(3d翻转)'
        centeredSlides: true, // 设置活动块居中
        spaceBetween: '18%', // slide中间的设置距离（单位PX）;
        slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量
        loopedSlides: this.images.length + 2, // 设置所要用到的loop个数（一般设置大于可视slide个数2个）
        loop: true,
        autoplay: true,
        coverflowEffect: {
          // coverflow效果参数
          rotate: 0, // slide做3d旋转时Y轴的旋转角度
          stretch: 0, // 每个slide之间的拉伸值，越大slide靠的越紧，5.3.6后可使用百分比%
          depth: 300, // slide的位置深度，值越大Z轴距离越远，看起来越小
          modifier: 1, //
          slideShadows: false, // 是否开启slide阴影
        },
      },
    }
  },

  created() {
    vm = this
  },
}
</script>

<style lang="scss" scoped>
.swiper {
  width: 250px;
  background-color: yellow;
  justify-content: center;

  img {
    display: block;
    width: 130px;
    border-radius: 5px;
    margin-right: 3px;
    box-shadow: 0 2px 4px 0 rgb(127 127 127 / 50%);
  }
}
</style>
<style></style>
